<template>
    <div v-loading="loading" class="YpList">
      <el-form
        size="mini"
        ref="form"
        :model="form"
        label-position="top"
        class="myform"
      >
        <div>
          <el-form-item label="款号" class="myform-item">
            <el-input
              v-model="form.type_no"
              placeholder="请输入款号"
              @keyup.enter.native="onSearch"
              clearable
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="厂名" class="myform-item">
            <el-input
              v-model="form.title"
              placeholder="请输入厂名"
              @keyup.enter.native="onSearch"
              clearable
            ></el-input>
          </el-form-item> -->
          <el-form-item style="margin-top: 39px">
            <el-button type="primary" @click="onSearch">查询</el-button>
          </el-form-item>
        </div>
        <div></div>
      </el-form>
      <el-table :data="list" size="small" border stripe>
        <el-table-column prop="title" label="导出类别" width="200">
        </el-table-column>
        <el-table-column prop="type_no" label="款号" width="200">
          <template slot-scope="{ row }">
            <div>
              {{row.type_no || "全部"}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="adduser" label="创建人" width="200">
        </el-table-column>
        <el-table-column prop="adduser" label="状态" width="200">
          <template slot-scope="{ row }">
            <div :style="{color:row.status==0?'':row.status==1?'#67C23A':'red'}">
              {{row.status==0?'生成中':row.status==1?'完成':'失败'}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createtime" label="创建时间" width="200">
        </el-table-column>
        <el-table-column label="操作" width="200">
            <template slot-scope="{ row }">
                <el-button type="text" v-if="row.status == 1" size="default" @click="onDownload(row.id)">下载</el-button>
            </template>
        </el-table-column>
        <el-table-column> </el-table-column>
      </el-table>
      <!-- <pagination
        :form="form"
        :total="total"
        @paginationPostOrderTaskList="postAdminExcelexcel_task_list"
      /> -->
    </div>
  </template>
      
  <script>
  import { postAdminExcelexcel_task_list } from "@/api";
  import pagination from "@/components/pagination.vue";
  export default {
    components: { pagination },
  
    data() {
      return {
        loading: false,
        list: [],
        form: {
          type_no: "",
          // page: 1,
          // size: 10,
        },
        total: 0,
      };
    },
    activated() {
      this.postAdminExcelexcel_task_list(this.form);
    },
    methods: {
      async clicktype_no(e) {
        let number = await this.encrypt(e);
        this.$router.push({
          name: `CustomModuleRouter`,
          params: { path: `/CustomModuleDesignFilesDetail/${number}` },
        });
      },
      // 新品预排
      async postAdminExcelexcel_task_list(data) {
        this.loading = true;
        this.form = data;
        try {
          let res = await postAdminExcelexcel_task_list(this.form);
          this.list = res.data;
          // this.total = Number(res.total);
          this.loading = false;
        } catch (error) {
          this.loading = false;
        }
      },
      onDownload(id){
        window.open('https://ssy.13yu.com//index.php/Admin/Excel/port_excel_task?id='+id)
      },
      // 搜索
      onSearch() {
        this.form.page = 1;
        this.form.size = 10;
        this.postAdminExcelexcel_task_list(this.form);
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .myform {
    display: flex;
    justify-content: space-between;
    > div {
      display: flex;
    }
    &-item {
      margin-right: 10px;
    }
  }
  .YpList {
    background: #ffff;
    padding: 10px;
    font-size: 12px;
  }
  .attribute {
    width: 320px;
    display: flex;
    flex-wrap: wrap;
    > div {
      border: 1px solid #888080;
      border-radius: 2px;
      overflow: hidden;
      display: flex;
      margin-right: 4px;
      margin-bottom: 2px;
      > div {
        padding: 2px 6px;
      }
      > div:nth-child(1) {
        color: #ffffff;
        background: #888080;
        text-align: center;
      }
    }
  }
  </style>